<template>
  <view class="tabBar bgColor-fff">
    <view :class="{'tabBar-item':true,'line-x':item.id == selected}" v-for="item in list" :key="item.id"
      @click="switchTab(item)">
      <image :src="item.id == selected ? item.selectedIconPath : item.iconPath"></image>
      <view class="text" :style="{color: item.id == selected ? '#2c2c2c':'#bebebe'}">{{item.text}}</view>
      <view v-if="item.id == 'cart' && allInfo.allNum" class="totalNum bgColor-ffe f12">{{allInfo.allNum}}</view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    name: "tab-bar",
    data() {
      return {
        selected:'home',
        list: [{
            id: 'home',
            pagePath: '/pages/home/home',
            iconPath: '/static/tabbar/home.png',
            selectedIconPath: '/static/tabbar/home-active.png',
            text: '首页'
          },
          {
            id: 'categorize',
            pagePath: '/pages/categorize/categorize',
            iconPath: '/static/tabbar/categorize.png',
            selectedIconPath: '/static/tabbar/categorize-active.png',
            text: '分类'
          },
          {
            id: 'cart',
            pagePath: '/pages/cart/cart',
            iconPath: '/static/tabbar/cart.png',
            selectedIconPath: '/static/tabbar/cart-active.png',
            text: '购物车'
          },
          {
            id: 'mine',
            pagePath: '/pages/mine/mine',
            iconPath: '/static/tabbar/mine.png',
            selectedIconPath: '/static/tabbar/mine-active.png',
            text: '我的'
          }
        ]
      };
    },
    props: {
      tabbar: {
        default: 'home',
        type: String
      }
    },
    mounted() {
      this.selected = this.tabbar
      // this.changeTab(this.tabbar)
    },
    computed: {
      // ...mapState('comunication', ['selected']),
      ...mapGetters('cart', ['allInfo'])
    },
    methods: {
      ...mapMutations('comunication', ['changeTab']),
      switchTab(item) {
        // this.changeTab(item.id)
        // if (item.id === 'home') {
        //   uni.reLaunch({
        //     url: item.pagePath
        //   })
        // } else {
        //   uni.navigateTo({
        //     url: item.pagePath
        //   })
        // }
        uni.switchTab({
          url:item.pagePath
        })
      }
    },
  }
</script>

<style lang="scss">
  .tabBar {
    position: fixed;
    bottom: 0;
    z-index: 1000;
    display: flex;
    width: 100%;
    // height: 124rpx;
    padding-top: 20rpx;
    display: content-box;
    box-shadow: 0 -2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
    box-sizing: content-box;
    /* #ifdef MP-WEIXIN */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    /* #endif */

    .tabBar-item {
      height: 100rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      &:nth-child(n+2)::after {
        content: '';
        position: absolute;
        left: 0;
        width: 2rpx;
        height: 80%;
        background-color: #bebebe;
      }

      .totalNum {
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        position: absolute;
        left: 55%;
        top: -10rpx;
        border-radius: 50%;
        color: #000;
      }

      image {
        width: 50rpx;
        height: 50rpx;
      }

      view {
        font-size: 24rpx;
        line-height: 50rpx;
        color: #bebebe;
      }
    }

    .line-x {
      border-bottom: 10rpx solid #ffe32a;
    }
  }
</style>
